<template>
  <!-- 模糊差 -->
  <el-form :inline="true" :model="productList" class="demo-form-inline">
    <el-form-item label="根据商品类别">
      <el-input v-model="productList.tname" placeholder="根据商品类别" clearable />
    </el-form-item>
    <el-form-item label="根据商品价格区间">
      <el-input v-model="productList.min" placeholder="最小价格" clearable />
      <el-input v-model="productList.max" placeholder="最大价格" clearable />
    </el-form-item>
    <el-button type="warning" @click="all()">查找</el-button>
  </el-form>
    <!-- 查全部 -->
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="pid" label="商品编号" width="180" />
    <el-table-column prop="pname" label="商品名称" width="180" />
    <el-table-column prop="price" label="商品价格" width="180" />
    <el-table-column prop="amount" label="商品库存数量" width="180" />
    <el-table-column prop="createtime" label="创建时间" width="180" />
    <el-table-column prop="updatetime" label="修改时间" width="180" />
    <el-table-column prop="tname" label="类别" width="180" />
    <el-table-column  label="操作" width="300" #default="scope">
        <el-button type="warning" @click="add()">添加购物车</el-button>
        <el-button type="warning" v-show="scope.row.amount<=1" disabled  >购买</el-button>
        <el-button type="warning"  v-show="scope.row.amount>1" @click="gou(scope.row)">购买</el-button>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="productList.pageNum"
      v-model:page-size="productList.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <!-- 分页 -->
   <!-- 提示框 -->
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >

<el-form-item label="订单明细id">
      <el-input disabled v-model="formInline.pid" placeholder="Approved by" clearable />
</el-form-item>
    <el-form-item label="商品名称">
      <el-input disabled v-model="formInline.pname" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="商品数量">
      <el-input-number v-model="formInline.pcount" :min="1" :max="10" @change="handleChange" />
    </el-form-item>
    <el-form-item label="创建时间">
      <el-input disabled v-model="formInline.createtime" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="修改时间">
      <el-input disabled v-model="formInline.updatetime" placeholder="Approved by" clearable />
    </el-form-item>
      <!-- 计数器 -->


<el-button type="warning" @click="goumai()">购买</el-button>

  </el-dialog>



</template>
<script  setup>
import { alll,addgouwu, goumaiqq, tianjia, updateid, xiugaiiio } from '@/api/gouwu';
import {  ElMessage } from 'element-plus';
import { ref } from 'vue';

const total=ref({})
const handleSizeChange = (val ) => {
 productList.value.pageSize=val
  all()
}
const handleCurrentChange = (val ) => {
  productList.value.pageNum=val
  all()
}


const productList=ref({
  pageNum:1,
  pageSize:5
})
const tableData=ref([])
function all(){
    alll(productList.value).then(res=>{
      if(res.data.code==200){
        tableData.value=res.data.data.records
        total.value=res.data.data.total
        if(res.data.data.records==0){
          ElMessage.error("没有找到商品")
        }
      
      }
    
    })
}
all()

function add(){
    addgouwu().then(res=>{
      if(res.data.code==200){
        ElMessage.success("添加购物车成功")
      }
    })
}





// 购买提示框
const dialogVisible=ref(false)



// 计数器
const num = ref(1)
const handleChange = (value) => {
  console.log(value)
}
const formInline=ref({})

function gou(row){
  dialogVisible.value=true
  formInline.value=row
}

function goumai(){
    goumaiqq(formInline.value).then(res=>{
      if(res.data.code==200){
        
      }
    }
 )
 tianjia().then(res=>{
      if(res.data.code==200){
        ElMessage.success("购买成功")
      }
    })
 updateid(formInline.value).then(res=>{
  if(res.data.code==200){
      }
 })
 xiugaiiio(formInline.value).then(res=>{
  if(res.data.code==200){

  }
 })
}
</script>